<template>
  <!--
    作者：luoyiming
    时间：2020-06-04
    描述：插件中心-签到有礼-签到设置
  -->
  <div v-if="!loading">
    <el-form size="small" :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <div class="open-sign">
        <span class="gray9">是否开启签到有礼</span>
        <el-switch v-model="form.is_open" class="ml10"></el-switch>
      </div>
      <div v-show="form.is_open" class="mt16">
        <!--每日签到固定奖励-->
        <div class="common-form">每日签到固定奖励</div>

        <el-form-item label="每日签到送" prop="ever_sign">
          <div class="max-w460 d-s-c">
            <div class="flex-1">
              <el-input v-model="form.ever_sign" placeholder="0" type="number"></el-input>
            </div>
            <span class="ml10">积分</span>
          </div>
        </el-form-item>
        <el-form-item label="递增奖励">
          <el-col>
          <el-radio v-model="form.is_increase" :label="true">有</el-radio>
          <el-radio v-model="form.is_increase" :label="false">无</el-radio>
          </el-col>
          <div v-if="form.is_increase" class="max-w460 border p-0-20 pt16 mt10">
            <el-form-item label="第二天起递增奖励" label-width="120px" prop="increase_reward">
              <div class="d-s-c">
                <div class="flex-1">
                  <el-input v-model="form.increase_reward" placeholder="请输入第二天起递增积分数" min="0" type="number"></el-input>
                </div>
                <span class="ml10">积分</span>
              </div>
            </el-form-item>
            <el-form-item label="第" label-width="120px" prop="no_increase">
              <div class="d-s-c">
                <div class="flex-1">
                  <el-input v-model="form.no_increase" placeholder="请输入第几天不再递增" min="0" type="number"></el-input>
                </div>
                <span class="ml10">天起不再递增</span>
              </div>
            </el-form-item>
          </div>
        </el-form-item>
        <!--连续签到额外奖励-->
        <div class="common-form">连续签到额外奖励 （达到额外奖励最大天数时，继续签到不会再获得额外奖励，断签后重新开始计算）</div>
       <el-form-item label="额外奖励">
          <div class="reward-list max-w460">
            <div
              class="reward-item pr border"
              v-for="(item, reward_index) in form.reward_data"
              :key="reward_index"
            >
              <el-button
                class="delete-reward"
                @click="deleteRewardClick(reward_index)"
                type="danger"
                size="small"
                icon="Close"
                circle
              ></el-button>
              <el-form-item
                label="连续签到"
                :prop="'reward_data.' + reward_index + '.day'"
                :rules="rules.day"
              >
                <div class="d-s-c">
                  <div class="flex-1">
                    <el-input
                      v-model="item.day"
                      placeholder="请输入连续签到天数"
                      class="max-w460"
                      type="number"
                      min="0"
                    ></el-input>
                  </div>
                  <span class="ml10 pr16">天</span>
                </div>
              </el-form-item>
              <el-form-item label="积分奖励">
                <div class="d-s-c">
                  <div>
                    <el-checkbox v-model="item.is_point"></el-checkbox>
                  </div>
                  <div v-if="item.is_point">
                    <el-form-item
                      label="送"
                      label-width="40px"
                      :prop="'reward_data.' + reward_index + '.point'"
                      :rules="rules.point"
                      style="margin-bottom: 0"
                    >
                      <div class="d-s-c">
                        <div class="flex-1">
                          <el-input
                            v-model="item.point"
                            placeholder="请输入连续签到天数的积分"
                            type="number"
                            min="0"
                          ></el-input>
                        </div>
                        <span class="ml10 pr16">积分</span>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
          <el-col>
            <el-button size="small" icon="Plus" @click="addReward"
              >添加</el-button
            >
          </el-col>
        </el-form-item>
        <!--规则-->
        <div class="common-form">规则</div>
        <el-form-item label="规则说明：">
          <div class="edit_container">
            <Uediter :text="ueditor.text" :config="ueditor.config" ref="ue" @contentChange="contentChangeFunc"></Uediter>
          </div>
        </el-form-item>
      </div>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="primary" size="small" @click="onSubmit" :disabled="loading">提交</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
  import SignApi from '@/api/sign.js';
  import Uediter from '@/components/UE.vue';
  export default {
    components: {
      /*编辑器*/
      Uediter
    },
    data() {
      /*判断额外奖励*/
      let validate_reward_data = (rule, value, callback) => {
        if (value.length < 1) {
          callback(new Error('请添加至少一项额外奖励！'));
        } else {
          callback();
        }
      };

      /*连续签到天数*/
      let validate_day = (rule, value, callback) => {
        if (this.form.reward_data.lenght < 1) {
          callback();
        } else {
          if (value === '') {
            callback(new Error('天数不能为空！'));
          }
          callback();
        }
      };

      /*连续签到天数的积分数*/
      let validate_point = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入连续签到积分数！'));
        } else {
          callback();
        }
      };

      return {
        /*富文本配置*/
        ueditor: {
          text: '',
          config: {
            initialFrameWidth: 400,
            initialFrameHeight: 500
          }
        },
        /*表单数据对象*/
        form: {
          is_open: false,
          is_increase: false,
          increase_reward: 0,
          no_increase: 0,
          ever_sign: 0,
          reward_data: []
        },
        /*是否正在加载*/
        loading: true,
        /*验证规则*/
        rules: {
          /*每日签到*/
          ever_sign: [{
            required: true,
            message: '每日签到送积分有误',
            trigger: 'blur'
          }],
          /*第二天起递增*/
          increase_reward: [{
            required: true,
            message: '请输入第二天起递增积分数',
            trigger: 'blur'
          }],
          /*第几天不再递增*/
          no_increase: [{
            required: true,
            message: '请输入第几天不再递增',
            trigger: 'blur'
          }],
          /*连续签到额外奖励*/
          reward_data: [{
            validator: validate_reward_data,
            required: true,
            trigger: 'blur'
          }],
          /*连续签到*/
          day: [{
            validator: validate_day,
            required: true,
            trigger: 'blur'
          }],
          /*连续签到积分数*/
          point: [{
            validator: validate_point,
            required: true,
            trigger: 'blur'
          }]
        }
      };
    },
    created() {
      /*获取列表*/
      this.getData();
    },
    methods: {
      contentChangeFunc(e){
        this.ueditor.text = e;
      },
      /*获取列表*/
      getData() {
        let self = this;
        self.loading = true;
        SignApi.getData()
          .then(data => {
            self.loading = false;
            let val = data.data.vars.values;
            if (val.is_increase == true) {
              self.form.is_increase = true;
            }
            if (val.is_open == true) {
              self.form.is_open = true;
              self.form.increase_reward = val.increase_reward;
              self.form.no_increase = val.no_increase;
              self.form.ever_sign = val.ever_sign;
              self.form.ever_sign = val.ever_sign;
              self.ueditor.text = val.content;
              if(val.reward_data){
                let len = val.reward_data.length;
                for (let i = 0; i < len; i++) {
                  let item = val.reward_data[i];
                  if (item.is_coupon == true) {
                    item.is_coupon = true;
                  } else {
                    item.is_coupon = false;
                  }
                  if (item.is_point == true) {
                    item.is_point = true;
                  } else {
                    item.is_point = false;
                  }
                }
                self.form.reward_data = val.reward_data;
              }
            }
          })
          .catch(error => {});
      },

      /*提交签到有礼*/
      onSubmit() {
        let self = this;
        let params = self.form;
        if (params.is_open) {
          params.content = self.ueditor.text;
        }
        self.loading = true;
        self.$refs.ruleForm.validate(valid => {
          if (valid) {
            SignApi.saveData(params, true)
              .then(data => {
                ElMessage({
                  message: '恭喜你，保存成功',
                  type: 'success'
                });
                self.getData();

              })
              .catch(error => {});
          }
        });
      },

      /*获取富文本编辑器的内容*/
      getContent: function() {
        if(this.editor){
           return this.editor.getContent();
        }else{
          return ''
        }
        // return this.$refs.ue.getUEContent();
      },

      /*添加奖励*/
      addReward() {
        let obj = {
          day: 0,
          is_point: false,
          point: 0,
          is_coupon: false,
          coupon: []
        };
        this.form.reward_data.push(obj);
      },

      /*删除奖励*/
      deleteRewardClick(e) {
        this.form.reward_data.splice(e, 1);
      }
    }
  };
</script>

<style scoped="scoped">
  .open-sign {
    padding: 20px;
    background: #e2f0ff;
  }

  .reward-list .reward-item {
    margin-bottom: 10px;
    padding: 20px 20px 0;
  }

  .reward-list .delete-reward {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
    z-index: 10;
  }

  .el-button--small.is-circle {
    padding: 4px;
  }
</style>
